import { createRoot } from 'react-dom/client'
import {
  HashRouter,
  BrowserRouter,
  Routes,
  Route,
  Link,
} from './react-router-dom'

import Home from './components/Home.jsx'
import User from './components/User.jsx'
import Profile from './components/Profile.jsx'
import Post from './components/Post.jsx'


const root = createRoot(document.getElementById('root'))

root.render(
  // 路由容器
  <BrowserRouter>
  <ul>
    <li><Link to="/">首页</Link></li>
    <li><Link to="/user">用户管理</Link></li>
    <li><Link to="/profile">个人中心</Link></li>
  </ul>
    {/* 里面保存路由规则  */}
    <Routes>
      {/* 每个 Route 组件代表一个路由规则 */}
      <Route path='/' element={<Home />}></Route>
      <Route path='/user' element={<User />} ></Route>
      <Route path='/profile' element={<Profile />}></Route>
      <Route path='/post/:id' element={<Post />}></Route>
    </Routes>
  </BrowserRouter>
)
